<template>
	<view class="content">
		<seachLink></seachLink>
		<!-- 轮播图 -->
		<view class="cancvs">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#fff"
			 indicator-color="rgba(0, 0, 0, .3)">
				<block v-for="(item,index) in swiperList" :key="index">
					<swiper-item>
						<image class="img" :src="item.image_src" mode=""></image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 分类 秒杀 超市 母婴 -->
		<view class="nav">
			<view class="icon-nav1" v-for="(item,index) in navList" :key='index'>
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>

		<view class="floor" v-for="(item,index) in floorList" :key="index">
			<!-- 具体布局 -->
			<view class="title">
				<image :src="item.floor_title.image_src" mode=""></image>
			</view>
			<view class="goods">
				<image v-for="(itemlist,indexlist) in item.product_list" :src="itemlist.image_src" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	// import request from '../../utils/request.js'
	import seachLink from '../../components/SearchLink.vue'
	export default {
		components: {
			seachLink
		},
		data() {
			return {
				// 轮播图数据
				swiperList: [],
				// 导航栏数据
				navList: [],
				//楼层数据
				floorList: []
			}
		},
		// 发送网络请求的得到轮播图数据
		async onLoad() {
			// 发送网络请求得到轮播图的数据源
			// 轮播图
			const res = await this.$axios({
				url: '/home/swiperdata'
			})
			this.swiperList = res.data.message
			// 导航栏
			const res1 = await this.$axios({
				url: '/home/catitems'
			})
			this.navList = res1.data.message
			// 楼层数据
			const res2 = await this.$axios({
				url: '/home/floordata'
			})
			this.floorList = res2.data.message
		},
		methods: {}
	}
</script>

<style lang="less">
	.content {
		padding-top: 100rpx;



		.nav {
			height: 192rpx;
			display: flex;
			align-items: center;

			.icon-nav1 {
				flex: 1;
				text-align: center;

				image {
					width: 140rpx;
					height: 140rpx;
				}
			}
		}
	}

	.swiper {
		width: 100%;
		height: 340rpx;
	}

	.img {
		width: 100%;
		height: 340rpx;
	}






	.floor {
		.title {
			image {
				width: 100%;
				height: 88rpx;
			}
		}

		.goods {
			padding: 20rpx 16rpx;

			image {
				width: 230rpx;
				height: 188rpx;
				border-radius: 5rpx;
			}

			image:nth-child(1) {
				float: left;
				height: 390rpx;
				margin-right: 10rpx;
			}

			image:nth-child(2),
			image:nth-child(4) {
				margin-right: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>
